import React, { useState } from 'react'
import { Link } from "react-router-dom"
import { useDispatch, useSelector } from 'react-redux'
import { Demo } from '../../../components/Customer/TableComponent'
import { getIdAction } from '../../../store/customerStore/action'
import style from "./index.module.scss"
import { Radio, DatePicker } from 'antd';
import moment from 'moment';

export default function VipList() {
    const { RangePicker } = DatePicker;
    const dispatch = useDispatch()

    const thisId = useSelector((state) => state.customer.id)

    // 表头
    const Columns = [
        {
            title: '排行',
            dataIndex: 'key',
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '会员名',
            dataIndex: 'name',
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '贷款总数（单位：个）',
            dataIndex: 'number',
            ellipsis: true,
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '贷款总金额',
            dataIndex: 'money',
            align: 'center',
            render: (text) => <>{text}</>

        },
    ];

    // 列表内容
    const DataList = [
        {
            key: '1',
            id: '1',
            name: '靓仔',
            number: '998',
            money: '99800',
        },
        {
            key: '2',
            id: '2',
            name: '吊毛',
            number: '666',
            money: '4396',
        },
    ];

    // 跳转时获取id
    const getID = (e) => {
        console.log('as', e.target.dataset.id);
        dispatch(getIdAction(e.target.dataset.id))
        console.log('修改了', thisId);
        // this.props.history.push('/child02')
    }

    const [size, setSize] = useState('all');

    const handleSizeChange = (e) => {
        setSize(e.target.value);
        console.log(e.target.value);
    };

    const setTime = (e,dateString) => {
        console.log(e[0]._d,dateString);
        const newDate =  moment(e[0]._d).format('YYYY-MM-DD')
        console.log(newDate);
    }
    

    return (
        <div className={style.content}>
            <div className={style.title}>
                <h4>会员排行</h4>
                <div className={style.titleRight}>
                    <button className={style.titleBtn}>导出数据</button>
                    <Radio.Group value={size} onChange={handleSizeChange}>
                        <Radio.Button value="all">全选</Radio.Button>
                        <Radio.Button value="month">最近30天</Radio.Button>
                        <Radio.Button value="ThreeMonth">最近90天</Radio.Button>
                    </Radio.Group>
                    <RangePicker format={'YYYY/MM/DD'} onChange={setTime} className={style.titleBtn} />
                </div>

            </div>

            {Demo(Columns, DataList, { total: DataList.length, type: false })}

        </div>
    )
}
